<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
    .main-container{
      max-width:600px;
      margin:0 auto;
      border:solid 10px green;
      padding:10px;
      margin-top:40px;
    }
    .main-container *{
      padding:10px;
      background:#aaa;
      border:dashed 5px #000;
    }

    .main-container * + *{margin-top:20px;}

    .main-header{
      height:50px; background:#aaa;
    }

    .main-content{
      min-height:1000px;
    }

    .main-footer{position:-webkit-sticky; position:sticky; bottom:20px; border-color:red;}
  </style>
</head>
<body>
<!--
https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
-->

<div style="height: 1000px;background: orange;"></div>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/position
A stickily positioned element is an element whose computed position value is sticky.
It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

粘性定位元素是指其计算的位置值为粘性的元素。
它被视为相对定位，直到它的包含块在其流根(或它滚动的容器)中越过指定的阈值(例如设置top为非auto值)，在这一点上它被视为“卡住”
，直到它碰到包含块的相反边缘。

todo ↑这就是为什么再向上滚动 sticky元素也不会往上走了 （最多走到包含块相反边缘的 content-box的边缘 （也就是包含块的padding以内,不含padding））
-->


<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>
</body>
</html>
